<template>
	<view class="page-orderDetail page">
		<view class="b-header">
			<pageHeader title="收银台"></pageHeader>
		</view>
		<view class="b-content p-30 p-t-50">
			<view class="fz54 c-000 bs mb-30 text-center padding-buttom-20" style="padding-bottom: 30px;">￥{{total_amount}}</view>
			
			<view class="df-ac p-30 bs" style="border-radius: 20rpx;justify-content: space-between" v-for="(pay,index) in payment" :key="index">
				<image v-if="pay.logo" :src="pay.logo" style="width: 70rpx; height: 70rpx;" mode=""></image>
				<view class="c-72 ml-30">
					<view class="fz30 mb-20"><text class="c-000 ">{{pay.pay_name}}</text></view>
					<view class="fz24">{{pay.pay_desc}}</view>
				</view>
				<view class=" df">
					<view class="fz30 mb-20 df-ac">
						<!-- <text class="c-000 "> -->
					<radio :value="pay.pay_mark" :checked="pay_mark == pay.pay_mark" @click="changeType(pay.pay_mark)"/>
					<!-- <label class="radio">
						<radio value=""></radio><text></text>
					</label> -->
					<!-- </text> -->
					</view>
				</view>
			</view>
			
			
			<view class="bs " v-if="showtime">
				<view class="detail">
					<view class="label p-50"> <text class="text-center">支付倒计时</text> <uni-countdown 
					    :show-day="false" 
					    :hour=pay_time.hour
					    :minute=pay_time.minute 
					    :second=pay_time.second :reset="false">
					</uni-countdown></view>
					
				</view>
			</view>
		</view>
		<view class="df p-r-60" style="justify-content: flex-end;" >
			<view class="btn btn-order" @click="pay()">立即支付</view>
			
		</view>
	</view>
</template>

<script>
	import tab from '../../components/tab.vue'
	import uniCountdown from "@/components/linnian-CountDown/uni-countdown.vue"
	import orderItemDetail from '../../components/orderItemDetail.vue'
	export default {
		components: {
			tab,
			orderItemDetail,
			uniCountdown
		},
		data() {
			return {
				tab:[
					{id:1,name:'全部'},
					{id:2,name:'待支付'},
					{id:3,name:'待发货'},
					{id:4,name:'待收货'},
					{id:5,name:'售后'},
				],
				type:'',
				pay_mark:'wxpayapp',//支付方式
				payment:[],
				total_amount:0,
				order_code:'',
				pay_time:{
				},
				showtime:false,
				//pay_res:{"appId":"wx016fb07f2b9b69a1","nonceStr":"sc3af20lzdfl6refycesqslqld8zggp0","package":"prepay_id=wx21141416000424a6a4d068ff80edf30000","signType":"MD5","timeStamp":"1640067256","paySign":"91BBD26308AAD69415838F5B7DBD177A"}
				pay_res:{},
			}
		},
		onLoad(op) {
			this.type = op.type
			this.order_code = op.order_code
			this.init();
		},
		created() {
		},
		methods: {
			tabClick(data) {
				this.type = data.id
			},
			//修改支付方式
			changeType(pay_mark){
				this.pay_mark = pay_mark
				console.log(this.pay_mark)
			},
			
			async init() {
			   //订单支付
				  var query = {
					  type:"query",
					  order_code:this.order_code
				  };
				   let res = await this.$api.orderPay(query).then(res=> {
				  	 console.log("下单")
				  		console.log(res)
				  		if(res.code == 0){
							this.total_amount = res.log.order_amount;
							this.payment = res.payment
							var log = res.log;
							var seconds = parseInt(log.time_diff)
							var hour = parseInt(seconds / 60 / 60 % 24);
							var minute = parseInt(seconds / 60 % 60);
							var second = parseInt(seconds % 60);
							this.pay_time.hour = hour
							this.pay_time.minute = minute
							this.pay_time.second = second
							console.log(this.pay_time)
							this.showtime = true
							// uni.showToast({
							// 	title:res.msg,
							// 	content:res.msg
							// })
				  		}else{
				  			uni.showModal({
				  				content:res.msg
				  			})
				  		}
				  		this.loadShow = false;
				   }).catch(err=> { console.log(err) }
				   );
				   
			 },
			 
			 async pay() {
			    //订单支付
				let that = this
			 	  var query = {
			 		  type:"pay",
					  pay_mark:this.pay_mark,
			 		  order_code:this.order_code
			 	  };

			 	   let res = await this.$api.orderPay(query).then(res=> {
			 	  	 console.log("下单")
			 	  		console.log(res)
			 	  		if(res.code == 0){
						if(that.pay_mark == 'wxpayapp'){
							//微信支付
							that.pay_res = res.pay_res
							uni.requestPayment({
							    provider: 'wxpay',
							    timeStamp: that.pay_res.timeStamp,
							    nonceStr: that.pay_res.nonceStr,
							    package: that.pay_res.package,
							    signType: that.pay_res.signType,//'MD5',
							    paySign: that.pay_res.paySign,
							    success: function (res) {
							        //console.log('success:' + JSON.stringify(res));
									uni.navigateTo({
									  url: '/pagePoint/order/orderList'
									});
							    },
							    fail: function (err) {
							        console.log('fail:' + JSON.stringify(err));
							    }
							});
						}else{
							uni.navigateTo({
							  url: '/pagePoint/order/orderList'
							});
						}

							
			 	  		}else{
			 	  			uni.showModal({
			 	  				content:res.msg
			 	  			})
			 	  		}
			 	  		this.loadShow = false;
			 	   }).catch(err=> { console.log(err) }
			 	   );
			 	   
			  },
		}
	}
</script>

<style lang="scss">
.page-orderDetail.page {
		padding-top: 100rpx;
	.b-content {
		// height: calc(100vh - 100rpx);
		.detail {
			font-size: 24rpx;
			.label {
				margin-bottom: 30rpx;
				color: #727C8E;
			}
			.des {
				color: #4C475A;
				display: inline-block;
				width: 140rpx;
			}
		}
	}
	.btn-order {
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border: 1px solid #ccc;
		color: #666;
		border-radius: 7rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
	
		&.red {
			border: 1px solid #FE5634;
			color: #FE5634;
		}
	}
}
</style>
